<template>
	<view :class='["detail","flex-column", classs.length == 0 ? "minHeight" : "h100"]'>
		<!-- #ifndef MP-TOUTIAO -->
		<uni-nav-bar style="z-index:999;" height="80rpx" left-icon="left" @clickLeft="goBack" title="帖子" :fixed="true"
			:statusBar='!globalIcon.isdouyin'></uni-nav-bar>
		<!-- #endif -->
		<official-account></official-account>
		<view class="detail-header" @click="goUser">
			<image style="width: 80rpx;height: 80rpx;" :src="picHref"></image>
			<view class="detail-username">
				<view class="top flex flex-align">
					<text>{{userName}}</text>
					<uni-icons v-if="!isUser" type="checkbox-filled" color='#2979ff' size="20"></uni-icons>
				</view>
			</view>
			<view class="flex center">
				<u-button text="AI动漫化" type="error" size="mini" @click="openAi"></u-button>
			</view>
		</view>
		<view class="detail-content imgHeight">
			<u-swiper v-if="childrens.length > 1&& !isVideo" :list="childrens" @change="swiperChange" :circular='true'
				:autoplay="false">
			</u-swiper>
			<image v-if="childrens.length==1 && !isVideo" :src="childrens[0]" mode="aspectFill"></image>
			<video v-if="isVideo" :ad-unit-id="isExpiredVip ? '' : 'adunit-e152689988be9a8e'" :autoplay="true" :loop="true" object-fit="cover"
				:src="childrens[0]" style="width: 100%;height: 100%;"></video>
			<view v-if="tags.length>0" class='label' @click="showLabel">
				<view class="label-icon">
					<image :src="globalIcon.labelIcon" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<view class="detail-utils padding-cross-10">
			<view style="column-gap: 10rpx;" class="flex center">
				<u-icon :name="heart" :color="color" size="26" @click="love"></u-icon>
				<u-icon name="chat" color="#000000" size="28" @click="openComment"></u-icon>
				<u-icon :name="globalIcon.sendIcon" size="22" @click="share"></u-icon>
			</view>
			<view class='circle-list' v-if="childrens.length > 1">
				<view :class='["circle",curryIndex===index?"active":""]' v-for="(item,index) in childrens" :key='index'>
				</view>
			</view>
			<view class="flex center">
				<!-- <u-icon name="gift" size="28" @click="saveFile"></u-icon> -->
				<u-button size="mini" text="保存" type="primary" @click="saveFile"></u-button>
			</view>
		</view>
		<!-- 		<view v-if="infos.edge_liked_by!=0" v-show="isLoading" class="padding-cross-10"
			style="display: flex;column-gap: 20rpx;">
			<u-avatar-group :urls="commentUserPic" size="25" gap="0.4"></u-avatar-group>
			<text>{{infos.edge_liked_by - 1}}位用户赞了</text>
		</view> -->
		<view class="detail-info padding-cross-10 flex-column">
			<text style="padding-right: 10rpx;font-weight: 700;font-size: 0.7rem;"
				:user-select="true">温馨提示:如果想第一时间收到消息可以订阅公众号:roiselove</text>
			<view>
				<view class="contentline">
					<text :selectable="true" :class="classs">{{content}}</text>
				</view>
				<!-- <text v-if="expand" @click="showExpand" class="opacity5">...展开</text> -->
			</view>
			<view class="action">
				<text @click="expands">{{expend}}</text>
				<text @click="transLang">翻译</text>
			</view>
			<text v-if="infos.edge_liked_by!=0 && infos.origin!='ins'"
				v-show="isLoading">共{{infos.edge_liked_by - 1}}位用户赞了</text>
			<view style="display: flex;justify-content: space-between;">
				<text v-if="commentCount!=0 && infos.origin!='ins'" @click="openComment">共{{commentCount}}条评论</text>
				<text>{{times}}</text>
			</view>
		</view>
		<!-- 		<view style="position: fixed;right: 10rpx;bottom: 10rpx;">
			<ad-custom unit-id="adunit-a542e42550500ee9"></ad-custom>
		</view> -->
		<!-- <ad-custom unit-id="adunit-a542e42550500ee9"></ad-custom> -->
		<drawer v-if="tags.length!==0">
			<template #header>
				<view>照片标记内容</view>
			</template>
			<template>
				<view class="drawer-list">
					<view class="drawer-list-item" v-for="(tag,index) in tags" :key="index">
						<image :src="transPic(tag,'tag')"></image>
						<view class="flex-column">
							<text>{{unescapes(tag.user.full_name)}}</text>
							<text>{{unescapes(tag.user.username)}}</text>
						</view>
					</view>
				</view>
			</template>
		</drawer>
	</view>
</template>

<script>
	import Config from "@/common/config.js";
	import {
		weBtoa,
		weAtob
	} from './atob.js'
	import {
		formatDay
	} from "@/utils/utils.js";
	import {
		mapGetters
	} from "vuex";
	import {
		getMedias,
		getComment,
		getEdgeDetail
	} from "@/api/app/api.js"
	export default {
		name: "default",
		data() {
			return {
				infos: {},
				commentUserPic: [],
				shortCode: "",
				spiperHeight: 0,
				show: false,
				userTags: "",
				edgeId: "",
				curryIndex: 0,
				comments: [],
				curryComment: "",
				showDrawer: false,
				expand: false,
				count: 0,
				isUser: false,
				isLike: false,
				size: 24,
				classs: ['line2'],
				isLoading: false,
				interstitialAd: null,
				isSearch: false,
				origin: "",
				expend:"展开",
				isTrans: false
			};
		},
		methods: {
			unescapes(val) {
				// console.log('unescape(val)',unescape(val.replace(/\\u/g, '%u')))
				return unescape(val.replace(/\\u/g, '%u'))
			},
			share() {
				// console.log('start', this.childrens[this.curryIndex])
				wx.cloud.downloadFile({
					fileID: this.childrens[this.curryIndex],
					success: (res) => {
						// console.log('res.tempFilePath', res.tempFilePath);
						wx.showShareImageMenu({
							path: res.tempFilePath,
							success: () => {
								wx.showToast({
									title: '分享成功',
									icon: 'success',
									duration: 500
								})
							}
						})
					}
				})

			},
			expands() {
				if(this.expend == '展开'){
					this.classs.splice(0)
					this.expend = "收起"
				}else{
					this.expend = '展开'
					this.classs.push('line2')
				}
			},
			goUser() {
				let user = this.infos.user;
				uni.navigateTo({
					url: `/pages/home/home?user=${user}`
				})
			},
			downloadFile(id, index) {
				// console.log(id, index, this.childrens);
				let types = id.split('.');
				uni.downloadFile({
					url: id,
					success: (res) => {
						// console.log('res', res)
						types[types.length - 1] == 'mp4' ?
							wx.saveVideoToPhotosAlbum({
								filePath: res.tempFilePath
							}) :
							wx.saveImageToPhotosAlbum({
								filePath: res.tempFilePath
							})
						if (index === this.childrens.length - 1) {
							uni.hideLoading()
							uni.showToast({
								title: "保存成功",
								icon: 'success',
								duration: 1000
							})
						}
					},
					fail: (err) => {
						// console.log(err)
						uni.hideLoading()
						uni.showToast({
							title: "保存失败",
							icon: 'error',
							duration: 1000
						})
					}
				})
			},
			transLang(){
				if(!this.isExpiredVip){
					wx.showModal({
						title:"温馨提示",
						content:"您还不是会员,是否开通会员?",
						success(){
							wx.navigateTo({
								url:"/pages/personal/pay"
							})
						},
						fail(){
							
						},
					})
				}else{
					this.classs.splice(0)
					this.expend = "收起"
					this.isTrans = true
				}
			},
			openAi() {
				let url = this.childrens[this.curryIndex]
				this.$store.commit('addAiImg', url)
				uni.switchTab({
					url: `/pages/chat/message-list?img=${url}`
				})
			},
			saveFile() {
				// console.log(this.interstitialAd)
				// if (this.interstitialAd) {
				// 	// console.log('开始展示广告')
				// 	this.interstitialAd.show().catch((err) => {
				// 		console.error(err)
				// 	})
				// }
				if (this.isExpiredVip){
					uni.showLoading({
						title: '正在保存中',
						mask: true
					});
					this.childrens.forEach((item, index) => {
						try {
							this.downloadFile(item, index)
						} catch (e) {
							uni.hideLoading()
							uni.showToast({
								title: '保存失败,' + e.message,
								icon: 'error',
								duration: 500
							})
						}
					});
				}else{
					wx.showModal({
						title:"温馨提示",
						content:"您还不是会员,是否开通会员?",
						success(){
							wx.navigateTo({
								url:"/pages/personal/pay"
							})
						},
						fail(){
							
						},
					})
				}
			},
			openTags() {
				this.show = true;
			},
			closeLabel() {
				this.$store.commit("setMask", false);
			},
			showLabel() {
				this.$store.commit("setMask", true);
			},
			closeTags() {
				this.show = false;
			},
			commentLove() {
				let edgeUser =
					this.isUser === true ?
					this.infos.user.username :
					this.$store.getters.userName;
				if (this.$store.getters.getUser.username !== edgeUser) {
					wx.cloud.callFunction({
						name: "quickstartFunctions",
						data: {
							type: "updateEdgeLike",
							data: {
								edge_id: this.edgeId,
								like: !this.isLike,
								user: edgeUser,
								liker: this.$store.getters.getUser.username,
								create_at_utc: Number(String(+new Date()).slice(0, 10)),
								update_time: Number(String(+new Date()).slice(0, 10)),
							},
						},
						success: (res) => {
							this.isLike = !this.isLike;
						},
						fail: (err) => {
							console.log("err", err);
						},
					});
				} else {
					uni.showToast({
						title: "不能自己点赞自己的帖子",
						icon: "none",
						duration: 1000,
					});
				}
			},
			async love() {
				if (!this.$store.getters.getLogin) {
					uni.showLoading({
						title: "正在登录中...",
					});
					// #ifdef MP-WEIXIN
					wx.cloud.callFunction({
						name: "quickstartFunctions",
						data: {
							type: "getOpenId",
						},
						success: (res) => {
							uni.hideLoading();
							this.$store.commit("setUser", res.result.info);
							this.$store.commit("setUserEdge", res.result.edgeInfo ?? []);
							this.commentLove();
						},
						fail: (err) => {
							console.log("err", err);
							uni.hideLoading();
						},
					});
					// #endif
					// #ifndef MP-WEIXIN
					let response = await getMedias({
						name: "quickstartFunctions",
						data: {
							type: "getOpenId",
						},
					})
					// console.log(response.data)
					// #endif
				} else {
					this.commentLove();
				}
			},
			openComment() {
				let edgeId = this.edgeId;
				let comment = this.content;
				let times = this.times;
				let comments = this.comments;
				// console.log('comments', comments, comment)
				uni.navigateTo({
					url: `/subA/comment/comment?edgeId=${edgeId}&isUser=${this.isUser}&pic=${this.picHref}`,
					events: {
						transformData(data) {
							console.log("transformData", data);
						},
					},
					success(res) {
						res.eventChannel.emit("transformData", {
							edgeId: edgeId,
							comtent: comment,
							comments: comments,
							times: times,
						});
					},
				});
			},
			goBack() {
				// uni.navigateBack({});
				if (this.origin != undefined) {
					uni.navigateBack()
				} else {
					uni.switchTab({
						url: "/pages/home/home-list"
					})
				}
			},
			swiperChange(e) {
				this.curryIndex = e.current;
			},
			transPic(val) {
				return Config.static_url + 'ins_img/' + val.user.pk + ".jpg";
			},
			showExpand() {
				this.expand = false;
				this.count = 1;
			},
			shareContent() {
				return {
					title: "BLACKPINK-INS小程序分享",
					content: this.infos.edge_media_to_caption,
					imageUrl: this.childrens[0],
					path: `/pages/detail/detail?edgeId=${this.shortCode}&shortCode=${this.edgeId}&isUser=${this.isUser}`,
					success(result) {
						console.log(result);
					},
					fail(err) {
						console.log(err);
					},
				};
			},
			transPics(val) {
				if (!this.isUser) {
					return val
				}
				let plat = Config.static_url;
				if (this.infos.origin != 'wx' && this.infos.origin != undefined) {
					plat = 'https://roseannepark.love/'
				}
				if (this.infos.origin == undefined && typeof val === "string" && val.includes("cloud://")) {
					return val;
				}
				if (val === undefined) {
					val = "HeadPortrait.jpg";
				}
				return plat + val;
			},
			comment1(data) {
				this.comments.push(...data);
				// console.log(this.comments)
				let newData = data.slice(0, 3)
				newData.forEach((item) => {
					this.commentUserPic.push(
						Config.cloud_url + "comment_user/" + `${item.user_id}.jpg`
					);
				});
				if (data.length > 0) {
					try {
						this.curryComment = typeof data[0].user == 'string' ? JSON.parse(res
								.result.data[0].user.replaceAll("'", '"').replaceAll("False", "false")
								.replaceAll("True", "true"))["username"] ?? "" : data[0].user
							.username;
						if (this.curryComment.length >= 14)
							this.curryComment = this.curryComment.slice(0, -6) + "...";
					} catch {
						console.log(111)
					}
				}
			},
			transPicaa(val, plat) {
				// console.log('val', val)
				if (!this.isUser) {
					return val
				}
				if (val.includes('cloud') && (plat != 'wx' || plat != undefined)) {
					let plat = Config.static_url;
					if (this.infos.origin != 'wx' && this.infos.origin != undefined) {
						plat = 'https://roseannepark.love/'
					}
					let das = val.split('/')
					// console.log(das)
					return plat + das[das.length - 1]
				}
				return val;
			},
		},
		computed: {
			...mapGetters(["showMasks"]),
			height() {
				let height = 796;
				height = height * this.$store.getters?.getPixelRatio ?? 2;
				return height + "rpx";
			},
			isExpiredVip(){
				const user = this.$store.getters.getUser
				return user.isVip == 1 && user.isVipExpire != 0 && (new Date(user.isVipExpire) - new Date()) > 0
			},
			heart() {
				return this.isLike ? "heart-fill" : "heart";
			},
			color() {
				return this.isLike ? "#ff0000" : "#000000";
			},
			userName() {
				console.log(
					"this.$store.getters.userName",
					this.isUser,
					this.$store.getters.userName
				);
				if (this.isSearch) {
					// console.log('搜索页面过来的用户名', this.infos)
					return this.infos.origin == 'ins' ? this.infos.owner.username : this.infos.user.username
				}
				return this.isUser ?
					this.$store.getters.getUser.username :
					this.infos.user;
			},
			picHref() {
				let plat = Config.static_url;
				if (this.infos.origin != 'wx' && this.infos.origin != undefined) {
					plat = 'https://roseannepark.love/'
				}
				if (this.isSearch) {
					return plat + (this.infos.origin == 'ins' ? 'ins_img/HeadPortrait.jpg' : this.infos.user.avatar);
				}
				// console.log('this.infos.user',this.infos.user)
				return (this.isUser && this.$store.getters.getUser.avatar) ? plat + this.$store.getters.getUser.avatar : plat + "ins_img/" + this.infos.user +
					'HeadPortrait.jpg'
			},
			times() {
				return this.infos?.taken_at_timestamp ?
					formatDay(this.infos.taken_at_timestamp + '000') :
					"";
			},
			isVideo() {
				if (this.infos?.is_video) {
					if (this.infos.is_video == 1) {
						return true;
					}
					return false;
				} else {
					return false;
				}
			},
			hasChildren() {
				return (
					this.infos?.edge_sidecar_to_children != "" &&
					this.infos.edge_sidecar_to_children != undefined
				);
			},
			childrens() {
				let childs =
					this.isUser == true ?
					this.infos?.edge_sidecar_to_children?.split(",") :
					this.infos?.edge_sidecar_to_children?.split(";");
				console.log(childs, this.infos.is_video);
				if (childs == undefined) {
					childs = []
				}
				childs?.pop()
				if(childs.length == 0){
					childs?.unshift(this.infos.shortcode)
				}
				let itmes = [];
				let palt = Config.static_url;
				if (this.infos.origin != undefined && this.infos.origin != 'wx') {
					// console.log('开始改变plat')
					palt = "https://roseannepark.love/"
				}
				if (this.infos.is_video == false || this.infos.is_video == 0) {
					let types;
					if (this.infos?.edge_sidecar_to_children_type == "") {
						types = []
					} else {
						types = this.infos?.edge_sidecar_to_children_type && typeof this.infos
							?.edge_sidecar_to_children_type == 'string' ? JSON.parse(this.infos
								?.edge_sidecar_to_children_type) : this.infos?.edge_sidecar_to_children_type;
					}
					// console.log(typeof types)
					if (types == undefined) {
						types = new Array(childs.length);
						types.fill('img')
					}
					if(types.length == 0){
						types.unshift(this.infos.media_type == 2 ? 'video' : 'img')
					}
					childs?.forEach((item, index) => {
						if (item != "") {
							if (this.isUser === true) {
								itmes.push(item);
							} else {
								itmes.push(Config.static_url + 'ins_img/' + item + (types[index] == 'img' ?
									'.jpg' : '.mp4'));
							}
						}
					});
					// itmes.unshift(Config.static_url + 'ins_img/'+this.infos.shortcode + ((this.infos.is_video ? '.mp4' : '.jpg')))
					!(this.isUser === true) &&
					itmes.length === 0 &&
						this.infos?.shortcode &&
						itmes.unshift(palt + 'ins_img/' + `${this.infos.shortcode}.jpg`);
				} else if (this.infos.is_video == 1) {
					if (this.infos.origin == 'ins') {
						itmes.push(palt + 'ins_img/' + `${this.infos.shortcode}.mp4`)
					} else {
						this.isUser === true ?
							itmes.push(this.transPicaa(this.infos.video_url, palt)) :
							itmes.push(palt + 'ins_img/' + `${this.infos.shortcode}.mp4`);
					}
				}
				console.log('itmes===========>',itmes)
				if (this.infos.origin == 'ins' && itmes.length == 0) {
					itmes.push(palt + 'ins_img/' + this.infos.shortcode + ((this.infos.is_video ? '.mp4' : '.jpg')));
				};
				return itmes;
			},
			content() {
				let con = "";
				if (this.isTrans) return this.infos?.transLang.replaceAll('眨眼', 'Blinks')
				try {
					con = unescape(weAtob(this.infos?.edge_media_to_caption).replace(/\\u/g, '%u'))
				} catch {
					con = this.infos?.edge_media_to_caption
				}
				// console.log('内容是:', con)
				return con
			},
			tags() {
				let userTags = [];
				if (this.infos?.edge_media_to_tagged_user) {
					try {
						userTags = JSON.parse(
							!this.isUser ? weAtob(this.infos.edge_media_to_tagged_user) : this.infos
							.edge_media_to_tagged_user
						);
					} catch (e) {
						// console.log('tag', e)
						try {
							userTags = JSON.parse(this.infos.edge_media_to_tagged_user);
						} catch {
							userTags = []
						}
					}
					userTags.forEach((item) => {
						this.userTags += "#" + item["user"]["username"];
					});
				}
				return userTags;
			},
			commentCount() {
				return this.infos?.edge_media_to_comment ?? 0;
			},
		},
		async onLoad(options) {
			console.log('optionsoptionsoptionsoptionsoptionsoptions',options)
			// #ifdef MP-WEIXIN
			// let interstitialAd11 = wx.createInterstitialAd({
			// 	adUnitId: 'adunit-af52896212f94e7b'
			// });
			// // console.log('测试广告')
			// interstitialAd11.onLoad(() => {
			// 	console.log('加载中')
			// })
			// interstitialAd11.onError((err) => {
			// 	console.log('interstitialAd11', err)
			// })
			// interstitialAd11.onClose(() => {
			// 	console.log('close')
			// })
			// interstitialAd11.show().catch((err) => {
			// 	console.error('show interstitialAd11', err)
			// })
			// this.interstitialAd = wx.createInterstitialAd({
			// 	adUnitId: 'adunit-b55dda37ea835765'
			// })
			this.interstitialAd = uni.createInterstitialAd({
				adpid: '1005343137'
			})
			this.interstitialAd.onLoad(() => {})
			this.interstitialAd.onError((err) => {})
			this.interstitialAd.onClose(() => {})
			// #endif
			this.origin = options.origin;
			this.isUser = options.isUser == "true";
			this.shortCode = options["edgeId"];
			let isSub = options.isSub == 'true';
			if (options.isSearch) {
				this.isSearch = options.isSearch == 'true'
			}
			let shortCode = (this.edgeId = options["shortCode"]);
			uni.showLoading({
				title: "正在加载",
			});
			if (this.isUser == true) {
				// #ifdef MP-WEIXIN
				if (options.isSearch && options.isSearch == 'true') {
					let chanel = this.getOpenerEventChannel();
					chanel.on('transformData', (data) => {
						// console.log("传输过来的数据", data);
						let datas = typeof data == 'string' ? JSON.parse(data) : data;
						this.infos = Object.assign({}, this.infos, datas);
						if (datas?.edgeInfo && datas?.edgeInfo?.length !== 0) {
							console.log(datas.edgeInfo);
							this.isLike = datas.edgeInfo[0].like;
						}
						uni.hideLoading();
						this.isLoading = true;
					});
				} else {
					wx.cloud.callFunction({
						name: "quickstartFunctions",
						data: {
							type: "getEdgeDetail",
							edge_id: "" + shortCode,
							liker: this.$store.getters.getUser.username,
							collectionName: this.isUser ? "user_edge" : "edge",
						},
						success: (res) => {
							let datas = res.result.data[0];
							this.infos = Object.assign({}, this.infos, datas);
							if (datas?.edgeInfo && datas?.edgeInfo?.length !== 0) {
								console.log(datas.edgeInfo);
								this.isLike = datas.edgeInfo[0].like;
							}
							uni.hideLoading();
							this.isLoading = true;
						},
						fail: (err) => {
							console.log(err);
							uni.hideLoading();
						},
					});
				}
				// #endif
				// #ifndef MP-WEIXIN
				let datas;
				if (options.isSearch && options.isSearch == 'true') {
					let chanel = this.getOpenerEventChannel();
					chanel.on('transformData', (data) => {
						// console.log("传输过来的数据", data);
						datas = typeof data == 'string' ? JSON.parse(data) : data;
					});
				} else {
					let resp = await getMedias({
						fnName: "quickstartFunctions",
						data: {
							type: "getEdgeDetail",
							edge_id: "" + shortCode,
							liker: this.$store.getters.getUser.username,
							collectionName: this.isUser ? "user_edge" : "edge",
						}
					})
					// console.log('JSON.parse(resp.data)',JSON.parse(resp.data))
					datas = JSON.parse(resp.data)['data'][0];
				}
				this.infos = Object.assign({}, this.infos, datas);
				if (datas?.edgeInfo && datas?.edgeInfo?.length !== 0) {
					// console.log(datas.edgeInfo);
					this.isLike = datas.edgeInfo[0].like;
				}
				uni.hideLoading();
				this.isLoading = true;
				// #endif
			} else {
				// console.log('console.log(shortCode,this.shortCode)',shortCode,this.shortCode)
				let _datas
				if(options.isPub){
					let res = await getEdgeDetail({
						edge_id:"" + shortCode,
						liker: options.openid,
					})
					// console.log(shortCode,this.shortCode)
					console.log('res.data',res.data)
					_datas = res.data[0][0];
					console.log('================================>')
				}else{
					let datas = this.$store.getters.getRoseEdge;
					// console.log('edge',datas)
					let edge = datas.filter((item) => {
						return item.edge_id == shortCode;
					});
					// console.log("edgessssss", edge);
					_datas = edge[0]
				}
				// console.log('_datas_datas_datas_datas_datas_datas',_datas)
				this.infos = Object.assign({}, this.infos, _datas);
				wx.hideLoading();
				this.isLoading = true;
			}
			let response = await getComment({
				page: 1,
				edgeid: shortCode
			})
			// console.log('response.data',response.data)
			this.comment1( response.data.length!=0 ? JSON.parse(response.data)['data'] : [])
			uni.showShareMenu(this.shareContent());
		},
		onShow() {
			const options = wx.getLaunchOptionsSync();
			// console.log("options", options)
		},
		onShareAppMessage(options) {
			// console.log(options);
			let shareOption = this.shareContent();
			shareOption.type = 1;
			return shareOption;
		},
	};
</script>

<style lang="scss" scoped>
	/deep/ .u-button {
		border-style: none !important;
		font-weight: 700;
	}
	
	.imgHeight{
		width: 750rpx;
		height: 794rpx;
	}
	
	.minHeight{
		min-height: 100%;
		// height: ;
	}

	.status_bar {
		height: calc(var(--status-bar-height) * 2);
		width: 100%;
	}

	.detail-content ::v-deep .u-swiper {
		height: 100% !important;
	}

	.detail-content ::v-deep .u-swiper__wrapper {
		height: 100% !important;
	}

	.detail-content ::v-deep .u-swiper__wrapper__item__wrapper__image {
		height: 100% !important;
		width: 100%;
	}

	.detail-content ::v-deep .u-swiper__wrapper__item__wrapper__video {
		height: 100% !important;
		width: 100%;
	}

	.circle-list {
		flex: 1;
		display: flex;
		align-items: center;
		column-gap: 10rpx;
		justify-content: center;

		.circle {
			width: 10rpx;
			height: 10rpx;
			border-radius: 50%;
			background-color: gray;
		}

		.active {
			background-color: #2979ff;
			width: 13rpx;
			height: 13rpx;
		}
	}

	.drawer-list {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		// max-height: 30vh;
		// overflow-y: scroll;
		margin: 18rpx 0;
		background-color: #fff;
		overflow: scroll;
		max-height: 40vh;

		.drawer-list-item {
			display: inline-flex;
			width: 100%;
			align-items: center;
			padding: 20rpx 20rpx;
			column-gap: 30rpx;

			image {
				height: 100rpx;
				width: 100rpx;
				border-radius: 50%;
			}
		}
	}

	// --status-bar-height
	.top_view {
		height: var(--status-bar-height);
		width: 100%;
		position: relative;
		top: var(--status-bar-height);
		z-index: 999;

		.header-title {
			font-weight: 700;
			font-size: 1.2em;
			padding-left: 20rpx;
		}

		.header-icon {
			padding-left: 15rpx;
		}
	}

	.detail-header {
		display: flex;
		height: 80rpx;
		justify-content: flex-start;
		align-items: center;
		margin: 20rpx 10rpx;

		image {
			height: 100%;
			width: auto;
			aspect-ratio: 1/1;
			border-radius: 100%;
			object-fit: cover;
		}

		.more {
			height: 70%;
			width: auto;
			aspect-ratio: 1/1;

			svg {
				height: 100%;
				width: 100%;
			}
		}

		.detail-username {
			flex: 1;
			padding: 0 15rpx;
			display: flex;
			flex-direction: column;

			.top {
				display: flex;

				text {
					font-weight: 700;
				}

				.authentication {
					height: auto;
					width: 50rpx;
					aspect-ratio: 1/1;
					background-image: url("~@/static/all.png");
					// background-position: buttom 50rpx right 1rpx ;
					background-position: right -50rpx center 10rpx;
				}
			}
		}
	}

	.detail-content {
		position: relative;

		image {
			height: 100% !important;
			width: 100%;
			padding: 0 0;
		}

		.label {
			height: 55rpx;
			width: 55rpx;
			border-radius: 50%;
			position: absolute;
			bottom: 20rpx;
			left: 20rpx;
			background-color: rgba(0, 0, 0, 0.3);
			z-index: 998;

			.label-icon {
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 50%;

				image {
					width: 50%;
					height: 50%;
				}
			}
		}
	}

	.detail-utils {
		display: flex;
		height: 70rpx;
		justify-content: space-between;
		padding: 0 10rpx;
	}

	.detail-info text {
		margin: 0 0;
	}
	
	.action{
		display: flex;
		justify-content: space-between;
		// column-gap: 10rpx;
	}

	.indicator {
		@include flex(row);
		justify-content: center;

		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;

			&--active {
				background-color: #ffffff;
			}
		}
	}

	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;
		@include flex;
		justify-content: center;

		&__text {
			color: #ffffff;
			font-size: 12px;
		}
	}

	.content {
		max-height: 2rem;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.user-tag {
		overflow: hidden;
		text-overflow: ellipsis;
		color: skyblue;
	}

	.tag-title {
		margin: 10rpx auto;
		font-weight: 700;
	}
</style>